<!Doctype html>
<html>

<head>
    <title>oixan的博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/blog.css">
    <link rel="stylesheet" type="text/css" href="./css/layui.css">
</head>

<body>
    <div class="head">
        <div class="headnav">
            <div class="naveframe">
                <ul class="navlist">
                    <li>
                        <a href="../index.html">
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="../bloglist.html">
                            博客
                        </a>
                    </li>
                    <li>
                        <a href="../about.html">
                            关于
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="headtext">
            <div class="headtext1">世界很简单，人类很复杂。</div>
            <div class="headtext2">浮生若梦，寻寻觅觅。</div>
        </div>
    </div>

    <div class="contents-all">
        <div class="contents">

            <div class="frame">
                <div class="title">
                    <h3>生成随机字符串</h3>
                </div>
                <div class="dtime">时间：2022-04-30</div>
                <div class="detail" id='detail'>


                    <style>
                        body {
                            margin: 20px;
                        }

                        .lia {
                            margin-top: 30px;
                        }

                        #see {
                            display: flex;
                            flex-direction: column;
                            word-break: break-all;
                            font-size: 1.2rem;
                        }
                    </style>
                    <script src="./js/layui.js"></script>

                    <body>
                        <form class="layui-form " lay-filter="example" action="">
                            <div class="layui-form-item"> <label class="layui-form-label">组合方式</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="Let" title="字母" checked>
                                    <input type="checkbox" name="Num" title="数字" checked>
                                    <input type="checkbox" name="Pun" title="符号">
                                </div>
                                <div class="layui-form-item"> <label class="layui-form-label">字符长度</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="nLen" value="16" lay-verify="required"
                                            placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-normal"
                                        id="LAY-component-form-getval">确定</button>
                                </div>
                        </form>
                        <div class="layui-bg-gray" style="padding: 10px;">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <div class="layui-panel">
                                        <div style="padding: 50px 20px;" id='see'>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <script>

                            function randomstr(length, str) {
                                var result = '';
                                for (var i = length; i > 0; --i)
                                    result += str[Math.floor(Math.random() * str.length)];
                                return result;
                            }

                            layui.use(['form', 'layedit', 'laydate'], function () {
                                var form = layui.form
                                    , layer = layui.layer
                                    , layedit = layui.layedit
                                    , laydate = layui.laydate;
                                form.render();
                                var see = document.getElementById('see')

                                layui.$('#LAY-component-form-getval').on('click', function () {
                                    var data = form.val('example');
                                    // var dateform = JSON.stringify(data)
                                    // alert(JSON.stringify(data));
                                    var stra = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
                                    var strb = '0123456789';
                                    var strc = '!#$%&*+-=?@^_~';
                                    var strs = '';
                                    var lens = 16;

                                    if (data['nLen']) {
                                        lens = Number(data['nLen']);
                                        if ((lens % 1 === 0) && (lens > 0)) {

                                        } else {
                                            lens = 0;
                                            alert('输入正整数!');
                                        }

                                    } else {
                                        lens = 0;
                                        alert('输入字符长度！');
                                    }


                                    if (data['Let'] || data['Num'] || data['Pun']) {

                                        if (data['Let']) {
                                            strs = stra;

                                        }
                                        if (data['Num']) {
                                            strs = strb;
                                        }

                                        if (data['Pun']) {
                                            strs = strc;
                                        }

                                        if (data['Let'] && data['Num']) {
                                            strs = stra + strb;
                                        }
                                        if (data['Let'] && data['Pun']) {
                                            strs = stra + strc;
                                        }
                                        if (data['Num'] && data['Pun']) {
                                            strs = strb + strc;
                                        }
                                        if (data['Let'] && data['Num'] && data['Pun']) {
                                            strs = stra + strb + strc;
                                        }

                                    } else {
                                        alert('最少选择一种组合！');
                                    }


                                    var rstr1 = randomstr(lens, strs);
                                    var rstr2 = randomstr(lens, strs);

                                    see.innerHTML = "<textarea >" + rstr1 + "</textarea ><textarea  class='lia'>" + rstr2 + "</textarea >";

                                });



                            });
                        </script>





                </div>
                <a href="javascript:void(0)" onclick="showPg()">返回</a>
            </div>


        </div>
    </div>
    <div class="footer">
        <div class="footertext">©2018,oixan博客</div>
    </div>
    <span id="backtop" onclick="topFunction()">返回顶部</span>
</body>
<script src="../js/fanhuiye.js"></script>

</html>